<!-- 
 
  角色管理
 -->

<div class="role">
  <div class="role-head">
    <span>
      <!-- <nz-breadcrumb nzSeparator=">">
        <nz-breadcrumb-item>
          组织结构
        </nz-breadcrumb-item>
        <nz-breadcrumb-item>
          角色管理
        </nz-breadcrumb-item>

      </nz-breadcrumb> -->
      <a [routerLink]="['/outer/dashboard']" class="breadcrumb">
        工作台
      </a>
      <span style="color: #acacac">
        <i nz-icon type="right" theme="outline"></i>
        组织结构
      </span>
      <b>
        <i nz-icon type="right" theme="outline"></i>
        角色管理
      </b>
    </span>
    <div style="width: 200px;  float: right; min-width: 260px;">
      <nz-input-group nzSearch [nzSuffix]="suffixButton">
        <input type="text" maxlength="30" nz-input placeholder="请输入关键字" (keyup)="keyupEvent($event)"
          [(ngModel)]="status.filter" />
      </nz-input-group>
      <ng-template #suffixButton>
        <button nz-button nzType="primary" nzSearch (click)="searchEvent()">搜索</button>
      </ng-template>
    </div>
    <span class="common-bread-search">
      <button style=" float: right; margin-right:20px;" nz-button [nzType]="'primary'" (click)="addRole()">
        添加角色
      </button>
      <button style="margin-right:20px; float: right" nz-button [disabled]="status.delBtnStatus" [nzType]="'primary'"
        (click)="delmembers()">
        批量删除
      </button>
    </span>
  </div>
  <div class="role-body">
    <!-- <nz-spin [nzTip]="" [nzSpinning]=""> -->
    <!-- <div class="common-table-wrap auto"> -->

    <div class="body">
      <nz-table #basicTable [nzData]="" [nzShowPagination]="false" [nzScroll]="{ y: '560px' }">
        <thead>
          <tr>

            <th nzWidth="4%" nzShowCheckbox [(nzChecked)]="status.allChecked" [nzIndeterminate]="status.indeterminate"
              (nzCheckedChange)="checkAll($event)"></th>
            <th nzWidth="15%">序号</th>
            <th nzWidth="30%">角色名称</th>
            <th nzWidth="30%">角色描述</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of status.dataList;let idx = index">
            <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="refreshCheckboxStatus()"></td>
            <td>{{idx+1}}</td>
            <td>{{data.displayName}}</td>
            <td>{{data.description || '-'}}</td>
            <td>
              <a href="javascript:;" (click)="editRole(data)" title="编辑">
                <i nz-icon class="icon" type="form"></i>
              </a>
              <nz-divider nzType="vertical"
                *ngIf="data.name !='Admin' && data.name !='Project'  && data.name !='BranchCompany' && data.name !='Normal' && data.name !='Special'">
              </nz-divider>
              <a href="javascript:;" (click)="delRole(data)"
                *ngIf="data.name !='Admin' && data.name !='Project'  && data.name !='BranchCompany' && data.name !='Normal' && data.name !='Special'"
                title="删除">
                <i nz-icon class="icon" type="delete"></i>
              </a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
    <div class="pager">
      <nz-pagination [(nzPageIndex)]="status.pager.pageIndex" [nzTotal]="status.pager.totalPages"
        [nzShowTotal]="rangeTemplate" nzShowQuickJumper [nzPageSize]="status.pager.pageSize"
        (nzPageIndexChange)="pageIndexChange($event)" (nzPageSizeChange)="pageSizeChange($event)">
      </nz-pagination>
      <!-- <ng-template #renderItemTemplate let-type let-page="page">
          <a *ngIf="type === 'pre'">上页</a>
          <a *ngIf="type === 'next'">下页</a>
          <a *ngIf="type === 'page'">{{ page }}</a>
        </ng-template> -->
      <ng-template #rangeTemplate let-total>
        共 {{total}} 条
      </ng-template>
    </div>
    <!-- </nz-spin> -->
    <!-- </div> -->

    <!-- 编辑新建模态框 -->
    <nz-modal [(nzVisible)]="status.isadd || status.isedit" nzWidth="880" (nzOnCancel)="cancelAddOredit()"
      [nzFooter]="modalFooter" [nzTitle]="status.isadd?'添加角色':'修改角色'">
      <div nz-row>
        <label nz-col nzSpan="4" style="line-height: 32px;text-align: right;">角色名称：</label>
        <input maxlength="20" nz-col nzSpan="20" nz-input [(ngModel)]="status.title"
          style="width: 60%; margin-right:8px;" placeholder="请输入角色名称"> <span
          style=" color:red;vertical-align: super;">*</span>
      </div>
      <div nz-row style="margin-top:20px">
        <label nz-col nzSpan="4" style="line-height: 32px;text-align: right;">角色描述：</label>
        <textarea maxlength="50" nz-col nzSpan="20" nz-input [(ngModel)]="status.description"
          style="width: 60%; margin-right:8px;" placeholder="请输入50字以内角色描述"></textarea> <span
          style=" color:red;vertical-align: super;">*</span>
      </div>
      <!-- 权限分配 -->
      <div class="form-rows  static" style="margin-top:20px;" name="form-child">

        <label class="rows-lab" style="margin-left:34px;">企业级权限分配：&nbsp;</label>
        <!-- <i nz-icon type="question-circle" theme="outline"  nzTitle='outtips' nzPlacement="top" nz-tooltip style="cursor:pointer;"></i> -->
        <span class="rows-inp">
          <span class="rows-inp-child-group" *ngFor="let data of status.authority;">
            <label class="rows-lab full rows-lab-icon">
              {{data.text}}
            </label>
            <span class="rows-inp full">
              <nz-checkbox-group [nzDisabled]='status.cantModify' [(ngModel)]="data.group"></nz-checkbox-group>
            </span>
          </span>
        </span>
      </div>

      <ng-template #modalFooter>
        <span></span>
        <!-- <button nz-button nzType="default"
          (click)="(status.isadd=false) || (status.isedit=false && status.title=null && status.description=null)">取消</button> -->
        <button nz-button nzType="primary" (click)="status.isadd?addSave():editSave()"
          [nzLoading]="isOkLoading">保存</button>
      </ng-template>
    </nz-modal>

    <!-- 弹出框（删除） -->
    <nz-modal [(nzVisible)]="status.isDelete" nzTitle="删除组织" nzOkText="确定" nzCancelText="取消" (nzOnOk)="delNode()"
      (nzOnCancel)="Canceldel()">
      <p>确定删除 {{status.title}} 吗？</p>
      <p style="color:red">删除后不能恢复，请谨慎操作。</p>
    </nz-modal>
  </div>